
<h1><%= "#{@user.person.name}'s Dashboard"%></h1>

<div class="modal_bg"></div>
<div id="calendar_actions">
  <h3 id="event_name">  </h3>
  <%= link_to(image_tag("/images/icons/png-8/12-em-cross.png", :class => "icon"), "#", :id => "close_actions", :style => "position: absolute; right: 3px; top: 3px;") %>
  <span class="action"><%= image_tag("/images/icons/png-8/24-zoom.png", :class => "icon") << "<label>" << link_to("Show Event", "#", :id => "calendar_show_event") << "</label>" %></span>
  <span class="action"><%= image_tag("/images/icons/png-8/24-image-open.png", :class => "icon") << "<label>" << link_to("Start Kiosk", "#", :id => "calendar_start_kiosk") << "</label>"  %></span> <br />

  <span id="the_actions"></span>
</div>

<div id="calendar"></div>

<SCRIPT type="text/javascript">
  function handleResize() {
    var height = jQuery(window).height();
    height = height - 230;
    jQuery('.wc-scrollable-grid').css('height', height);
  }

  jQuery(document).ready(function() {
    
    jQuery.event.add(window, "resize", handleResize);

    var year = new Date().getFullYear();
    var month = new Date().getMonth();
    var day = new Date().getDate();

    //TODO: ADD SHORTCUT TO START EVENT IF ADMIN
<% if current_user.person.is_keyholder? %>
      var eventData = {
        events : [
  <% for event in @events  %>
            {"id":<%=event.id%>, "start": new Date(<%=event.starts_at.year%>, <%=event.starts_at.month-1%>, <%=event.starts_at.day%>, <%=event.starts_at.hour%>, <%=event.starts_at.min%>), "end": new Date(<%=event.ends_at.year%>, <%=event.ends_at.month-1%>, <%=event.ends_at.day%>, <%=event.ends_at.hour%>, <%=event.ends_at.min%>), "title": "<a class='calendar_action' href='#' id='event_<%= event.id %>' name='<%= event.name %>'><img src='/images/icons/png-8/16-zoom.png' class='icon' /><%= event.name %></a>"},
  <% end %>
        ]};
<% else %>
      var eventData = {
        events : [
  <% for event in @events  %>
            {"id":<%=event.id%>, "start": new Date(<%=event.starts_at.year%>, <%=event.starts_at.month-1%>, <%=event.starts_at.day%>, <%=event.starts_at.hour%>, <%=event.starts_at.min%>), "end": new Date(<%=event.ends_at.year%>, <%=event.ends_at.month-1%>, <%=event.ends_at.day%>, <%=event.ends_at.hour%>, <%=event.ends_at.min%>), "title": "<a href='/events/<%= event.id %>'><img src='/images/icons/png-8/16-zoom.png' class='icon' /><%= event.name %></a>"},
  <% end %>
        ]};
<% end %>


    jQuery('#calendar').weekCalendar({
      data : eventData,
      noEvents : function() {
        alert("There are no events for this week");
      },
      readonly : true,
      businessHours: {start: 7, end: 22, limitDisplay: true}
    });

    handleResize();

    jQuery('.wc-scrollable-grid').css('border-bottom', '1px solid #AAAAAA');
    jQuery('.wc-scrollable-grid').css('background', '#f0f3f5');

<% if current_user.person.is_keyholder? %>
      jQuery('.calendar_action').click(function(){
        var event_id = jQuery(this).attr('id').substring(6);
        var event_name = jQuery(this).attr('name');
  <%#*var html = jQuery.get("/events/small/" + event_id, function(data){%>
  <%#*jQuery("#the_actions").html(data);%>
  <%#*});%>
          
        jQuery("#calendar_show_event").attr("href", "/events/" + event_id);
        jQuery("#calendar_start_kiosk").attr("href", "/visitors-signin/event/" + event_id);
        jQuery("#event_name").html(event_name);

        jQuery(".modal_bg").fadeIn("fast", function(){
          jQuery("#calendar_actions").show();
        });

        jQuery("#close_actions").click(function(){
          jQuery("#calendar_actions").hide();
          jQuery(".modal_bg").fadeOut("fast");
          return false;
        });



        
      });
<% end %>

  });

</SCRIPT>
